link(href="${relativePath}/static/js/cropper/cropper.css" rel="stylesheet" type="text/css")

div.personData
	div.row
		label.realName 真实姓名：
		input.txt.realNametxt(type="text" placeholder="请输入真实姓名" readonly="readonly")
	div.row.sex
		label 性别：
		a.man.current(href="javascript:;") 男
		a.women(href="javascript:;") 女
	div.row
		label.realName 地址：
		input.txt.addresstxt(type="text" placeholder="地址"  readonly="readonly")
	div.row
		label.realName 详细地址：
		input.txt.realaddresstxt(type="text" placeholder="详细地址" readonly="readonly")
	div.row
		label 个人资质认证：
		a.gocert(href="javascript:;") 去认证
	div.row.headImg
		label 头像：
		section.sectionBody#sectionSc.fl
			div.contentone
				div.image(style="display:none;")
					img#photoSrc(src="")
					span.delete
				span.add.buttonFiles
					img(src="${relativePath}/static/imgs/bjzl.png")
					| <input type="file" id="photo" value="添加图片">
			div.upbtn
				span 上传
		//- 编辑头像
		section.sectionBody#second
			div.img-container
				img#imgscr(src="")
			div#selector
				span.commonBtn 确认裁剪
				span.qxBtn.commonBtn 取消
	//- 联系方式
	div.concatLists
		//- div.row
		//- 	label.realName 联系方式：
		//- 	input.txt.phone(type="text" placeholder="请输入手机号")
		//- 	select.selectOpt.allLook
		//- 		option 所有人可见
		//- div.row
		//- 	label.realName
		//- 	input.txt.chatNum(type="text" placeholder="请输入微信号")
		//- 	select.selectOpt.allLook
		//- 		option 所有人可见
		//- div.row
		//- 	label.realName
		//- 	input.txt.qqNum(type="text" placeholder="请输入QQ号")
		//- 	select.selectOpt.allLook
		//- 		option 所有人可见
		//- div.row
		//- 	label.realName
		//- 	input.txt.emailNum(type="text" placeholder="请输入邮箱号")
		//- 	select.selectOpt.allLook
		//- 		option 所有人可见
	div.row.saveBox
		a.save(href="javascript:;") 保存
		a.cancle(href="javascript:;") 取消
//- js
block append pageScript
	script(src="${relativePath}/static/js/cropper/cropper.js")
	script.
		$(function() {
			//- 点击性别
			$(".sex a").click(function() {
				$(this).addClass("current").siblings("a").removeClass("current");
			})
			//- 获取页面信息
			$.get(shopIp+"/user/verify?userToken="+token,function(result) {
				//- 真实姓名
				var results = result.data;
				$(".realNametxt").val(results.real_name);
				//- 性别
				if(results.sex == "男") {
					$(".man").addClass("current").siblings("a").removeClass("current");
				} else{
					$(".women").addClass("current").siblings("a").removeClass("current");
				}
				$(".addresstxt").val(results.address)
				$(".realaddresstxt").val(results.area_address)
				$(".buttonFiles img").attr("src",results.avatar_img);
				//- 联系方式展示
				let concatArr = results.contact
				for(var i=0;i<concatArr.length;i++) {
					let typeVal
					let ele
					if(concatArr[i].auth == '0') {
						typeVal = '所有人可见'
					} else if (concatArr[i].auth == '1') {
						typeVal = '仅同事可见'
					} else if (concatArr[i].auth == '2') {
						typeVal = '仅好友可见'
					}else{
						typeVal = '认证用户可见'
					}
					if(concatArr[i].type == '0') {
						ele = "<div class='row'><label class='realName'>联系方式：</label><input readonly='readonly' class='input txt phone' type='text' placeholder='请输入'"+concatArr[i].name+"/><select class='selectOpt allLook'><option>"+typeVal+"</option></select></div>"
					}else{
						ele = "<div class='row'><label class='realName'>联系方式：</label><input class='input txt phone' type='text' placeholder='请输入'"+concatArr[i].name+"/><select class='selectOpt allLook'><option>"+typeVal+"</option></select></div>"
					}

					$(".concatLists").append(ele)
					
				}
			})
			//- 编辑头像
			var fileImg="";
			var activeBool=false;
			//- 点击取消编辑头像
			$(".qxBtn").click(function() {
				clearImg();
			})
			//- 点击删除图片
			$(".image .delete").click(function() {
				 deleteImg();
			})
			//- 点击上传
			$(".upbtn").click(function() {
				submiteUser();
			})
			function cropperInit(imgurl){
				// alert("开始裁剪");
				layer.closeAll();
				var $image = $('.img-container > img');
				$image.attr("src",imgurl); 
				if(activeBool){
					$image.cropper('replace', imgurl);
				}
				else{
					$image.on("load", function() {        // 等待图片加载成功后，才进行图片的裁剪功能
						$image.cropper({
							aspectRatio: 1 / 1　　// 1：1的比例进行裁剪，可以是任意比例，自己调整
						});
						activeBool=true;
					});	
				}
			}
			function deleteImg(){
				$(".image").hide();
					$("#photo").show();
					fileImg="";
					$("#photoSrc").attr('src',"");
					//- $("#photo").attr('type',"file");
					$(".buttonFiles").show();
			}
			function clearImg(){
				$("#sectionSc").show();
				$("#second").hide();
				$("#selector").hide();
			}
			//继续编辑
			$("#photoSrc").on('click',function(){
				$("#sectionSc").hide();
				$("#second").show();
				$("#selector").show();
			});
			function loadding(){
				layer.load(2, {
					shade: [0.3,'#fff'] //0.1透明度的白色背景
				});
			}
			$('#photo').on('change', function (e) {
				loadding();
				var file = e.target.files[0];
				var type = file.type;
				if (type !== 'image/jpeg' && type !== 'image/png') {
				layer.msg('请上传 jpg 或 png 格式的图片');
				} 
				else{
					// var formData = new FormData();
					var fr=new FileReader();
					fr.onload=function () {
						$("#sectionSc").hide();
						$("#second").show();
						$("#selector").show();
						cropperInit(this.result);
					}
					fr.readAsDataURL(file);

				}
			});
			
			$("#selector").on("click", function() {
				var $image = $('.img-container > img');
				var src = $image.eq(0).attr("src");
				var canvasdata = $image.cropper("getCanvasData");
				var cropBoxData = $image.cropper('getCropBoxData');
				convertToData(src, canvasdata, cropBoxData, function(basechar) {
					// 回调后的函数处理        
					// alert(basechar);
					fileImg=basechar;
					$(".image").show();
					$("#photo").hide();
					$(".add").hide();
					$("#photoSrc").attr('src',basechar);
					//- $("#photo").attr('type',"text");
					clearImg();
					$(".buttonFiles").hide();

				});
			})

			function submiteUser(){
				var username=$("#username").val();
				var usercode=$("#usercode").val();
				if(fileImg==""){
					layer.msg("请选择上传图片！",{time:1000});
				}else {
					layer.closeAll();
					loadding();
					 //base64图片数据
					var arr = fileImg.split(','), mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
					while(n--){
						u8arr[n] = bstr.charCodeAt(n);
					}
					var obj = new Blob([u8arr], {type:mime});
					// alert(fileImg+"  "+username);
					var dataimg = new FormData();	//以下为像后台提交图片数据
					dataimg.append('hearderimg',obj,"image.png");
					dataimg.append('username',username);
					dataimg.append('userdesc',usercode);
					//dataimg.append('mobile',"");
					$.ajax({
						type: 'POST',
						url: shopIp+'/Utils/uploadAvatar?userToken='+token,
						data: dataimg,
						contentType: false,
						processData: false,
						success: function(result) {
							layer.closeAll();
							//alert(JSON.stringify(result));
							if(result.status==200){
								// alert(result.Message);
								layer.msg(result.msg);
							}
							else{
								layer.msg(result.msg);
							}
							},
						error: function(err) {	
							layer.closeAll();
							layer.msg("服务器异常",{time:1000});
						}
					});
				}
			}
			function convertToData(url, canvasdata, cropdata, callback) {
				var cropw = cropdata.width; // 剪切的宽
				var croph = cropdata.height; // 剪切的宽
				var imgw = canvasdata.width; // 图片缩放或则放大后的高
				var imgh = canvasdata.height; // 图片缩放或则放大后的高
				
				var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置
				var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置
				var canvas = document.createElement("canvas");
				var ctx = canvas.getContext('2d');
				canvas.width = cropw;
				canvas.height = croph;
				var img = new Image();
				img.src = url;
				img.onload = function() {
					this.width = imgw;
					this.height = imgh;
					    // 这里主要是懂得canvas与图片的裁剪之间的关系位置
					ctx.drawImage(this, poleft, potop, this.width, this.height);
					var base64 = canvas.toDataURL('image/jpg', 1);  // 这里的“1”是指的是处理图片的清晰度（0-1）之间，当然越小图片越模糊，处理后的图片大小也就越小
					callback && callback(base64)      // 回调base64字符串
				}
			}
			function confirmMsg(str,callback){
				layer.confirm(str, {
					skin: 'layui-layer-molv',shadeClose: true,area:["80%",'auto'],title:"友情提示",
					btn: ['确定','取消'] //按钮
				}, function(){
					callback();
				}, function(){
					layer.closeAll();
				});
			}
			//- 点击取消回到个人中心
			$(".cancle").click(function() {
				$(".nav li.pindx").addClass('active').siblings().removeClass('active')
				$(".one").show().siblings().hide()
			})
			//- 点击保存
			$(".save").click(function() {
				var SEX;
				if($(".man").hasClass("current")) {
					SEX="1";
				}else{
					SEX="2";
				}
				$.post(shopIp+"/User/updateInfo",{
					userToken:token,
					nice_name:$(".realNametxt").val(),
					sex:SEX,
					contact:concat
				},function(data) {
					//console.log(data);
					if(data.status == "200") {
						layer.msg(data.msg);
						setTimeout(function() {
							window.location.href="personIndex.html";
						},1000)
					}else{
						layer.msg(data.msg);
					}
				})
			})
		})